.dx-size-default() {
    @GENERIC_CHECKBOX_SIZE: 22px;
    @GENERIC_CHECKBOX_ARROW_ICON_SIZE: 16px;

    @GENERIC_CHECKBOX_INTERMIDIATE_ICON_SIZE: 12px;
    @GENERIC_CHECKBOX_INTERMIDIATE_ICON_MARGIN: 4px;
}

.dx-size-compact() {
    @GENERIC_CHECKBOX_SIZE: 16px;
    @GENERIC_CHECKBOX_ARROW_ICON_SIZE: 10px;

    @GENERIC_CHECKBOX_INTERMIDIATE_ICON_SIZE: 8px;
    @GENERIC_CHECKBOX_INTERMIDIATE_ICON_MARGIN: 3px;
}

@GENERIC_CHECKBOX_DISABLE_OPACITY: .4;

.dx-checkbox {
    line-height: 0;

    &.dx-state-readonly {
        .dx-checkbox-icon {
            border-color: @checkbox-readonly-border-color;
            background-color: @checkbox-readonly-bg;
        }
    }

    &.dx-state-hover {
        .dx-checkbox-icon {
            border: 1px solid @checkbox-hover-border-color;
        }
    }

    &.dx-state-focused {
        .box-shadow(none);

        .dx-checkbox-icon {
            border: 1px solid @checkbox-focused-borderd-color;
        }
    }

    &.dx-state-active {
        .dx-checkbox-icon {
            background-color: @checkbox-active-icon-bg;
        }
    }
}

.dx-checkbox-icon {
    width: @GENERIC_CHECKBOX_SIZE;
    height: @GENERIC_CHECKBOX_SIZE;
    .border-radius(@checkbox-icon-border-radius);
    border: 1px solid @checkbox-border-color;
    background-color: @checkbox-bg;

    .dx-checkbox-checked & {
        .dx-icon-check;
        color: @checkbox-checked-color;
        .dx-icon-font-centered-sizing(@GENERIC_CHECKBOX_ARROW_ICON_SIZE);
    }

    .dx-checkbox-indeterminate & {
        &:before {
            content: '';
            width: @GENERIC_CHECKBOX_INTERMIDIATE_ICON_SIZE;
            height: @GENERIC_CHECKBOX_INTERMIDIATE_ICON_SIZE;
            background-color: @checkbox-indeterminate-bg;
            position: absolute;
            left: @GENERIC_CHECKBOX_INTERMIDIATE_ICON_MARGIN;
            top: @GENERIC_CHECKBOX_INTERMIDIATE_ICON_MARGIN;
        }
    }
}

.dx-checkbox-text {
    margin-left: -@GENERIC_CHECKBOX_SIZE;
    padding-left: @GENERIC_CHECKBOX_SIZE + 5px;

    .dx-rtl &,
    .dx-rtl& {
        margin-right: -@GENERIC_CHECKBOX_SIZE;
        padding-right: @GENERIC_CHECKBOX_SIZE + 5px;
    }
}

.dx-state-disabled {
    &.dx-checkbox, .dx-checkbox {
        opacity: 1;

        .dx-checkbox-icon {
            opacity: @GENERIC_CHECKBOX_DISABLE_OPACITY;
        }
    }
}

.dx-invalid {
    .dx-checkbox-container {
        .dx-checkbox-icon {
            border: 1px solid @checkbox-invalid-faded-border-color;
        }
    }

    &.dx-state-focused {
        .dx-checkbox-container {
            .dx-checkbox-icon {
                border-color: @checkbox-invalid-focused-border-color;
            }
        }
    }
}
